<template>
	<div v-if="dataInfo">
		<navigationBar :backType="2" navigationTitle="技师详情" />

		<view class="wrap">
			<view class="wrap-banner">
				<!-- <video :poster="dataInfo.work_image" :src="dataInfo.video_file" /> -->
				<video :src="dataInfo.video_file" />
			</view>

			<view class="wrap-info">
				<view class="one-bg flex align-center just-between">
					<view class="nickname f-32 fBold limit-num-line"> {{ dataInfo.name }} </view>

					<view class="status-bg flex align-center">
						<view class="status f-24"> 今日可约 </view>
						<view class="time f-24"> {{ dataInfo.subscribe }} </view>
					</view>

					<view class="distance-bg flex align-center just-end">
						<image :src="getImageURL('home/location.png')" />
						<view class="f-28">{{ dataInfo.distance }}km</view>
					</view>
				</view>

				<view class="two-bg flex just-between">
					<view class="two-left">
						<view class="authen-bg flex">
							<view class="item f-20" v-if="dataInfo.authentication == 1"> 实名认证 </view>
							<view class="item f-20"> {{ dataInfo.city }} </view>
							<view class="item f-20"> {{ dataInfo.age }}岁 </view>
						</view>

						<view class="aaa-bg flex align-center f-24">
							<view class="star-bg flex align-center">
								<image class="img" :src="getImageURL('home/star.png')" />

								<view class="score"> {{ dataInfo.star }} </view>
							</view>

							<view class="service-num"> 已服务{{ dataInfo.total_sales }}单 </view>

							<view class="year">从业{{ dataInfo.practise_year }}年</view>

							<view class="collection">{{ dataInfo.attention_num }}人关注</view>
						</view>
					</view>
					<view class="appoint-btn f-24" @click="onAppointment"> 立即预约 </view>
				</view>
			</view>

			<view class="wrap-technician-info">
				<view class="photo-bg flex align-center">
					<view class="name f-28"> 相册： </view>
					<scroll-view scroll-x class="photo flex">
						<block v-for="(item, index) in dataInfo.images" :key="index">
							<image class="item" :src="item" @click="$filters.onPreviewImage(dataInfo.images, index)" />
						</block>
					</scroll-view>
				</view>

				<view class="info-bg flex align-center">
					<block v-for="(item, index) in info_list" :key="index">
						<view class="info-item f-28">
							{{ item.title }}：{{ dataInfo[item.value] }}{{ item.unit }}
						</view>
					</block>
				</view>
			</view>

			<view class="wrap-cer-bg">
				<view class="name f-28"> 营业执照：</view>

				<image class="img" mode="widthFix" :src="dataInfo.qualification_image[0]" />
			</view>

			<view class="wrap-list" v-if="list.length > 0">
				<view class="title-list f-32 fBold"> ta的服务项目 </view>

				<projectList :technicianID="technicianID" :showType="1" :list="list" />
			</view>
		</view>
	</div>
</template>

<script>
	import { technicianDetailsData, projectListData } from "@/API/home.js";
	import projectList from "@/components/home/projectList.vue";
	export default {
		components: {
			projectList,
		},
		data() {
			return {
				technicianID: "", //技师ID
				serviceID: "", //服务ID
				dataInfo: null, //详情数据

				info_list: [
					{ title: "属相", value: "zodiac_animal_text", unit: "" },
					{ title: "星座", value: "constellation_text", unit: "" },
					{ title: "性别", value: "gender_text", unit: "" },
					{ title: "民族", value: "nation", unit: "" },
					{ title: "入驻", value: "into_day", unit: "天" },
					{ title: "评价", value: "star", unit: "星" },
					{ title: "身高", value: "heigh", unit: "cm" },
					{ title: "体重", value: "weigh", unit: "kg" },
				], //技师的信息

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.technicianID = options.technicianID;
			if (options.serviceID) {
				this.serviceID = options.serviceID;
			}

			this.getData();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getListData();
			}
		},
		methods: {
			/**
			 * 立即预约
			 */
			onAppointment() {
				this.$filters.goConfirmOrder(this.technicianID, this.serviceID);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getListData();
			},
			getListData() {
				projectListData(this.technicianID, this.page).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			/**
			 * 网络请求
			 */
			getData() {
				const locationInfo = this.$stoarge.getLocationInfo();
				const lat = locationInfo.lat || "";
				const lng = locationInfo.lng || "";
				technicianDetailsData(this.technicianID, lat, lng).then((res) => {
					this.dataInfo = res.data;

					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
					this.list = [...this.list, ...res.data.service.data];
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		.wrap-banner {
			width: 100%;
			height: 750rpx;
			overflow: hidden;

			video {
				width: 100%;
				height: 750rpx;
			}
		}

		.wrap-info {
			width: 100%;
			background-color: white;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			overflow: hidden;

			.one-bg {
				width: 100%;
				overflow: hidden;

				.nickname {
					--limit-num: 1;
					color: $title-color;
				}

				.status-bg {
					margin-left: 18rpx;
					height: 42rpx;
					border: 2rpx solid $theme-color;
					overflow: hidden;

					> view {
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
					}

					.status {
						padding: 0 8rpx;
						background-color: $theme-color;
						color: $bg-text-color;
					}

					.time {
						padding: 0 25rpx;
						background-color: #e9ebf8;
						color: #606dce;
					}
				}

				.distance-bg {
					margin-left: 10rpx;
					flex: 1;
					> image {
						width: 24rpx;
						height: 28rpx;
					}
					> view {
						margin-left: 8rpx;
						color: $title-color;
					}
				}
			}
			.two-bg {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;

				.two-left {
					flex: 1;
					margin-right: 10rpx;
					overflow: hidden;

					.authen-bg {
						width: 100%;
						overflow: hidden;
						flex-wrap: wrap;

						.item {
							min-width: 96rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							overflow: hidden;
							padding: 0 8rpx;
							box-sizing: border-box;
							background-color: #fddec6;
							color: #f87918;
							border-radius: 4rpx;
							margin-right: 14rpx;

							&:last-child {
								margin-right: 0;
							}
						}
					}

					.aaa-bg {
						margin-top: 20rpx;
						width: 100%;
						overflow: hidden;

						.star-bg {
							.img {
								width: 25rpx;
								height: 25rpx;
							}
							.score {
								margin-left: 12rpx;
								color: #f98e35;
							}
						}

						.service-num {
							margin-left: 22rpx;
							color: $sub-title-color;
						}
						.year {
							margin-left: 20rpx;
							color: $sub-title-color;
						}
						.collection {
							margin-left: 20rpx;
							color: $sub-title-color;
						}
					}
				}

				.appoint-btn {
					width: 156rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					overflow: hidden;
					border-radius: 30rpx;
					background: $grad-theme-color;
					color: $bg-text-color;
				}
			}
		}

		.wrap-technician-info {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			background-color: white;
			padding: 20rpx 20rpx 0rpx 20rpx;
			box-sizing: border-box;

			.photo-bg {
				width: 100%;
				overflow: hidden;

				.photo {
					margin-left: 15rpx;
					flex: 1;
					overflow: hidden;
					white-space: nowrap;

					.item {
						width: 100rpx;
						height: 100rpx;
						display: inline-block;
						border-radius: 12rpx;
						overflow: hidden;
						margin-right: 14rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
				.name {
					color: $title-color;
				}
			}

			.info-bg {
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;
				flex-wrap: wrap;

				.info-item {
					width: calc(100% / 3);
					color: $title-color;
					margin-bottom: 30rpx;
				}
			}
		}

		.wrap-cer-bg {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			background-color: white;

			.name {
				color: $title-color;
			}
			.img {
				margin-top: 20rpx;
				width: 100%;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.mtp {
				margin-top: 30rpx;
			}
		}

		.wrap-list {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;
			overflow: hidden;

			.title-list {
				margin-left: 20rpx;
				margin-top: 30rpx;
				color: $title-color;
			}
		}
	}
</style>
